<template v-loading="loading">
    <van-row class="main-menu">
        <van-nav-bar left-text="返回" title="智能报告" @click-left="doBack" />
        <div class="waiquanbox">
            <div>
            <!-- 侧边内容区域 -->
            <!-- <el-aside class="aside" width="200px">
                <el-card class="aside-card" body-style="padding-top:0px;">
                    <div v-bind:class="{ asideDiv:true,isActive:true }">
                        <i class="icon-data"></i>
                    </div>
                    <span class="qestype-title">智能报告</span>
                </el-card>
            </el-aside> -->
            <!-- 主体内容区域 -->
            <el-main class="main" style="position: relative">
                <div class="statistical-chart">
                    <el-card class="sc-title">
                        <span class="title">智能报告</span>
                        <!-- <el-button type="primary" plain @click="exportWord">
                            <i class="icon-export"></i>
                            导出Word
                        </el-button>
                        <el-button type="primary" plain @click="importBase">
                            <i class="icon-export"></i>
                            导出报告
                        </el-button> -->
                        <a href="" id="openword"></a>
                    </el-card>
                    <!-- <el-card class="chart-subject" body-style="padding:0px;height:100%">
                        <el-scrollbar style="height: 100%;">
                            <el-card class="chart-container">
                                <div class="container" v-for="item,index in chartData" :key="index">
                                    <div class="header">
                                        <span class="title">Q{{index+1}}{{item.title}}</span>
                                        <el-dropdown split-button class="select" size="mini" v-if="item.ifChart">
                                            {{item.componentName}}
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item @click.native="changeChart('rectangle',index,'柱状图')">柱状图
                                                </el-dropdown-item>
                                                <el-dropdown-item @click.native="changeChart('linex',index,'折线图')">折线图
                                                </el-dropdown-item>
                                                <el-dropdown-item @click.native="changeChart('pie',index,'圆饼图')">圆饼图
                                                </el-dropdown-item>
                                                <el-dropdown-item @click.native="changeChart('redar',index,'雷达图')">雷达图
                                                </el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </div>
                                    <div class="content">
                                        <div :is="item.component" :index="index" :dataTitle="item.dataTitle"
                                            :title="item.title" :tableData="item.tableData" :dataNum="item.dataNum">
                                        </div>
                                    
                                    </div>
                                </div>
                            </el-card>
                        </el-scrollbar>
                    </el-card> -->
                    <el-card class="chart-subject"> 
                        <div class="container">
                            <el-select :disabled="datadisabled" @change="chickbumen" v-model="choseque" style="width:140px;display:inline-block;margin-bottom:10px;" placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                            <el-date-picker
                                v-model="statrEndtime"
                                @change="dateChangebirthday1"
                                type="daterange"
                                align="right"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions" style="margin-left:10px;margin-bottom:10px;">
                            </el-date-picker>
                            <el-button type="primary" plain @click="importBase" style="margin-left:10px">
                                <i class="icon-export"></i>
                                导出报告
                            </el-button>
                            <!-- <div class="tishichi">
                                单位：{{choseque}} 时间: {{creattime}} - {{endtime}}
                            </div> -->
                        </div>
                    </el-card>
                    <el-card class="chart-subject">
                        <div class="container">
                            <!-- 一、问题发现方式的情况 -->
                            <div id="wtfxfsdqk" class="myChart2" style="width: 100%;height:500px;display: block;"></div>
                            <!-- 一、问题单位的分布情况 -->
                            <div id="wtdwdfbqk" class="myChart3" style="width: 100%;height:500px;display: block;"></div>
                            <!-- 一、问题专业类别的分布情况 -->
                            <div id="wtzylbdfbqk" class="myChart3" style="width: 100%;height:500px;display: block;"></div>
                            <!-- 四、问题业务事项的分布情况 -->
                            <div id="wtywsxdfbqk" class="myChart3" style="width: 100%;height:500px;display: block;"></div>
                            <!-- 五、问题所属层面的分布情况 -->
                            <div id="wtsscmdfbqk" class="myChart3" style="width: 100%;height:300px;display: block;"></div>
                            <!-- 六、问题管理环节的分布情况 -->
                            <div id="wtglhjdfbqk" class="myChart3" style="width: 100%;height:500px;display: block;"></div>
                            <!-- 七、问题类别的分布情况 -->
                            <div id="wtlbdfbqk" class="myChart3" style="width: 100%;height:500px;display: block;"></div>
                            <!-- 八、问题对应体系单元的分布情况 -->
                            <div id="wtdytxdydfbqk" class="myChart3" style="width: 100%;height:500px;display: block;"></div>
                            <!-- 九、问题对应体系要素的分布情况 -->
                            <div id="wtdytxysdfbqk" class="myChart3" style="width: 100%;height:500px;display: block;"></div>
                            <!-- 十、问题严重程度的分布情况 -->
                            <div id="wtyzcddfbqk" class="myChart3" style="width: 100%;height:500px;display: block;"></div>
                            <!-- 十一、公司和各单位三老问题的分布情况 -->
                            <div id="gsslwtdfbqk" class="myChart3" style="width: 100%;height:200px;display: block;"></div>
                            <div id="dwslwtdfbqk" class="myChart3" style="width: 100%;height:500px;display: block;"></div>
                            <!-- 十二、公司和各单位问题主动暴露的分布情况 -->
                            <div id="gswtzdbldfbqk" class="myChart3" style="width: 100%;height:200px;display: block;"></div>
                            <div id="dwwtzdbldfbqk" class="myChart3" style="width: 100%;height:500px;display: block;"></div>
                            <!-- 十三、公司和各单位问题整改情况 -->
                            <div id="gswtzgqk" class="myChart3" style="width: 100%;height:400px;display: block;"></div>
                            <div id="gdwwtzgqk" class="myChart3" style="width: 100%;height:1500px;display: block;"></div>
                        </div>
                    </el-card>
                </div>
            </el-main>
        </div>
        </div>
    </van-row>
</template>

<script>
import { Loading } from 'element-ui';
import {echartssletct,echartssletctdw,tijiaoBase,tijiaoBasedw} from "../../api/regsport"
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入饼状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
import redar from './chartType/redar.vue'
import linex from './chartType/Line.vue'
import pie from './chartType/Pie.vue'
import rectangle from './chartType/rectangle.vue'
import tablex from './chartType/table.vue'
import JSZipUtils from 'jszip-utils'
import docxtemplater from 'docxtemplater'
import { saveAs } from 'file-saver'
import PizZip from 'pizzip'
    export default {
        data() {
            return {
                statrEndtime: '',//插件选择时间
                creattime:'', //开始时间
                endtime:'', //截止时间
                choseque: '', //选中部门
                 pickerOptions: {
                    shortcuts: [{
                        text: '本月',
                        onClick(picker) {
                        picker.$emit('pick', [new Date(), new Date()]);
                        }
                    }, {
                        text: '今年至今',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date(new Date().getFullYear(), 0);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近六个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setMonth(start.getMonth() - 6);
                        picker.$emit('pick', [start, end]);
                        }
                    }]
                    },
                    options: [{
                    value: '广州局',
                    label: '广州局'
                    }, {
                    value: '贵阳局',
                    label: '贵阳局'
                    }, {
                    value: '昆明局',
                    label: '昆明局'
                    }, {
                    value: '南宁局',
                    label: '南宁局'
                    }, {
                    value: '柳州局',
                    label: '柳州局'
                    }, {
                    value: '天生桥局',
                    label: '天生桥局'
                    }, {
                    value: '梧州局',
                    label: '梧州局'
                    }, {
                    value: '百色局',
                    label: '百色局'
                    }, {
                    value: '曲靖局',
                    label: '曲靖局'
                    }, {
                    value: '大理局',
                    label: '大理局'
                    }, {
                    value: '南宁监控中心',
                    label: '南宁监控中心'
                    }, {
                    value: '检修试验中心',
                    label: '检修试验中心'
                    }, {
                    value: '公司本部',
                    label: '公司本部'
                }],
                disabled:true,//导出点击状态显示隐藏
                datadisabled:false,//时间状态显示隐藏
                loading: false, //加载
                choseTime:'', //获取时间值
                chearZong:{},
                shujuYuan:[], //获取全部数据
                allBase:[],  //bsee64
                department_name:'', ///获取当前部门
                charwtFxfs:[],  //问题发现方式的情况
                charwtDwdfbqk:[],  //问题单位的分布情况
                charwtwtzylbdfbqk:[],  //问题专业类别的分布情况
                charwtwtywsxdfbqk:[],  //问题业务事项的分布情况
                charwtwtsscmdfbqk:[],  //问题所属层面的分布情况
                charwtwtglhjdfbqk:[],  //问题管理环节的分布情况
                charwtwtlbdfbqk:[],  //问题类别的分布情况
                charwtwtdytxdydfbqk:[],  //问题对应体系单元的分布情况
                charwtwtdytxysdfbqk:[],  //问题对应体系要素的分布情况
                charwtwtyzcddfbqk:[],  //问题严重程度的分布情况
                charwtgsslwtdfbqk:[],  //公司三老问题的分布情况
                charwtdwslwtdfbqk:[],  //各单位三老问题的分布情况
                charwtgswtzdbldfbqk:[],  //公司问题主动暴露的分布情况
                charwtdwwtzdbldfbqk:[],  //各单位问题主动暴露的分布情况
                charwtgswtzgqk:[],  //公司问题整改情况
                charwtgdwwtzgqk:[],  //各单位问题整改情况
                chartData: [
                    { id: 1, title: '小笨蛋', dataTitle: ['03.0111', '03.02', '03.03',], dataNum: [5, 10, 3], tableData: [], component: 'rectangle', ifChart: true, componentName: '柱状图1' },
                    {
                        id: 3, title: '小笨蛋', dataTitle: ['03.01222', '03.02', '03.03',], dataNum: [5, 10, 3],
                        tableData: [{ name: '小戏精' }, { name: '小戏精' }, { name: '小戏精' }, { name: '小戏精' }, { name: '小戏精' }, { name: '小戏精' }, { name: '小戏精' }, { name: '小戏精' }, { name: '小戏精' }, { name: '小戏精' },]
                        , component: 'tablex', ifChart: false, componentName: '表格22'
                    },
                    { id: 2, title: '小笨蛋', dataTitle: ['03.01333', '03.02', '03.03',], dataNum: [5, 7, 3], tableData: [], component: 'rectangle', ifChart: true, componentName: '柱状图3' }
                ],
                imageListBase: [],
                imageListBase2:"你好",
                maChart1:[],  //问题发现方式的情况
                maChart2:[],  //问题单位的分布情况
                maChart3:[],  //问题专业类别的分布情况
                maChart4:[],  //问题业务事项的分布情况
                maChart5:[],  //问题所属层面的分布情况
                maChart6:[],  //问题管理环节的分布情况
                maChart7:[],  //问题类别的分布情况
                maChart8:[],  //问题对应体系单元的分布情况
                maChart9:[],  //问题对应体系要素的分布情况
                maChart10:[],  //问题严重程度的分布情况
                maChart11:[],  //公司三老问题的分布情况
                maChart12:[],  //各单位三老问题的分布情况
                maChart13:[],  //公司问题主动暴露的分布情况
                maChart14:[],  //各单位问题主动暴露的分布情况
                maChart15:[],  //公司问题整改情况
                maChart16:[]  //各单位问题整改情况
            }
        },
        computed: {
            option() {
                return echartConfig(this);
            },
            columns() {
                return tableConfig(this);
            }
        },
        created() {
            this.addDate()
            this.statrEndtime = [this.startdateTime, this.updateTime]
            this.creattime = this.statrEndtime[0];
            this.endtime = this.statrEndtime[1]
            // this.dateChangebirthday1()
            console.log(this.statrEndtime)
            //获取当前人用户部门
            if(!this.$store.state.authInfo.user.rectify[0].department_path){
                this.department_name = this.$store.state.authInfo.user.roles.corp.assess_dept[0].department_name //测试环境
                console.log(this.department_name)
            }else{
                this.department_name = this.$store.state.authInfo.user.rectify[0].department_path//企业微信
                console.log(this.$store.state.authInfo.user)
                console.log(this.department_name)
                var department_name = this.department_name.split('/')
                this.choseque = department_name[1]
            }

            if(department_name[1] == '公司本部'){
                this.companyecharts()
            }else{
                this.dwecharts()
                this.datadisabled = true
            }

            // 页面初始化时初始化数据
            for (let i = 0; i < this.chartData.length; i++) {
                let lis = {}
                lis.title = this.chartData[i].title
                lis.ifChart = !this.chartData[i].ifChart
                lis.tableData = this.chartData[i].tableData
                lis.url = ''
                this.imageListBase.push(lis)
            }
        },  
        mounted() {


        }, 
        methods: {
            //获取当前年月日
            addDate(){
            const nowDate = new Date();
            const date = {
                year: nowDate.getFullYear(),
                month: nowDate.getMonth() + 1,
                date: nowDate.getDate(),
            }
            const newmonth = date.month>=10?date.month:'0'+date.month
            const day = date.date>10?date.date:'0'+date.date
            this.startdateTime = date.year + '-01-01' 
            this.updateTime = date.year + '-' + newmonth + '-' + day
            console.log(this.startdateTime)
            },
            //获取部门
            chickbumen(){
                console.log(this.choseque)
                var department_name = this.department_name.split('/')
                console.log(department_name)
                var choseque = this.choseque //选择部门名称
                if(department_name[1] == this.choseque || this.department_name == '超高压输电公司' || department_name[1] == '公司本部'){
                    this.statrEndtime = ''
                    // if(choseque == '公司本部'){
                    //     this.companyecharts()
                    // }else{
                    //     this.dwecharts()
                    // }
                }else{
                    this.$message({
                        type: "error",
                        message: "暂无权限，请选择您所属的单位！",
                    });
                }

            },
            //获取时间
            dateChangebirthday1(val) {

                this.startTime = val;
                this.creattime = this.getTime(this.startTime[0])
                this.endtime = this.getTime(this.startTime[1])
                console.log(this.creattime);
                console.log(this.endtime);
                var choseque = this.choseque //选择部门名称
                console.log(choseque)
                if(choseque == '公司本部'){
                   this.companyecharts()
                }else{
                   this.dwecharts()
                }
                if(this.choseque && this.creattime && this.endtime){
                    this.disabled = false
                }


        
            },
            //公司数据
            companyecharts(){
                let loadingInstance = Loading.service({ fullscreen: true });
                echartssletct({creattime:this.creattime,endtime:this.endtime}) //请求临时列表数据
                . then((res) => {
                    this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                        loadingInstance.close();
                            // this.statrEndtime = ''
                            // this.choseque = ''
                            //this.datadisabled = true;
                    });
                    console.log(res)
                    if(res.data.retCode == '400'){
                        this.startExecution(res)
                    }

                })
                .catch((err) => {
                    console.log(err)
                });
            },
            //公司数据
            dwecharts(){
                let loadingInstance = Loading.service({ fullscreen: true });
                console.log(this.creattime,this.endtime,this.choseque,'33333333333333333333333333333')
                echartssletctdw({creattime:this.creattime,endtime:this.endtime,dwmc:this.choseque}) //请求临时列表数据
                . then((res) => {
                    this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                        loadingInstance.close();
                            // this.statrEndtime = ''
                            // this.choseque = ''
                    });
                    console.log(res)
                    if(res.data.retCode == '400'){
                        this.startExecution(res)
                    }

                })
                .catch((err) => {
                    console.log(err)
                });
            },
            //执行数据
            startExecution(res){
                this.shujuYuan = res.data.retData
                this.charwtFxfs = res.data.retData.wtfxfslb//问题发现方式情况
                this.charwtDwdfbqk = res.data.retData.wtdwfblb//问题单位的分布情况
                this.charwtwtzylbdfbqk = res.data.retData.wtzylb//问题专业类别的分布情况
                this.charwtwtywsxdfbqk = res.data.retData.wtywsxlb//问题业务事项的分布情况
                this.charwtwtsscmdfbqk = res.data.retData.wtsscmlb//问题所属层面的分布情况
                this.charwtwtglhjdfbqk = res.data.retData.wtglhjlb//问题管理环节的分布情况
                this.charwtwtlbdfbqk = res.data.retData.wtlblb//问题类别的分布情况
                this.charwtwtdytxdydfbqk = res.data.retData.wtdytxdylb//问题对应体系单元的分布情况
                this.charwtwtdytxysdfbqk = res.data.retData.wtdytxyslb//问题对应体系要素的分布情况
                this.charwtwtyzcddfbqk = res.data.retData.wtyzcdlb//问题严重程度的分布情况
                this.charwtgsslwtdfbqk = res.data.retData.sfslwt1//公司三老问题的分布情况
                this.charwtdwslwtdfbqk = res.data.retData.sfslwt2//各单位三老问题的分布情况
                this.charwtgswtzdbldfbqk = res.data.retData.sfzdbl1//公司问题主动暴露的分布情况
                this.charwtdwwtzdbldfbqk = res.data.retData.sfzdbl2//各单位问题主动暴露的分布情况
                this.charwtgswtzgqk = res.data.retData.wtzgz//公司问题整改情况
                this.charwtgdwwtzgqk = res.data.retData.wtzgdw//各单位问题整改情况
                // // // // // // // // // 
                this.paint1()//问题发现方式情况
                this.paint2()//问题单位的分布情况
                this.paint3()//问题专业类别的分布情况
                this.paint4()//问题业务事项的分布情况
                this.paint5()//问题所属层面的分布情况
                this.paint6()//问题管理环节的分布情况
                this.paint7()//问题类别的分布情况
                this.paint8()//问题对应体系单元的分布情况
                this.paint9()//问题对应体系要素的分布情况
                this.paint10()//问题严重程度的分布情况
                this.paint11()//公司三老问题的分布情况
                this.paint12()//各单位三老问题的分布情况
                this.paint13()//公司问题主动暴露的分布情况
                this.paint14()//各单位问题主动暴露的分布情况
                this.paint15()//公司问题整改情况
                this.paint16()//各单位问题整改情况
                console.log(this.charwtdwslwtdfbqk)
            },
            //转化时间格式 例如：2019-06-19
            getTime (date) {
               var year = date.getFullYear(); 
                var month =(date.getMonth() + 1).toString(); 
                var day = (date.getDate()).toString();  
                if (month.length == 1) { 
                    month = "0" + month; 
                } 
                if (day.length == 1) { 
                    day = "0" + day; 
                }
                var dateTime = year + "-" + month + "-" + day;
                return dateTime; 
            },
            
            importBase(){
                let loadingInstance = Loading.service({ fullscreen: true });
                for(let va in this.shujuYuan){
                   this.chearZong[va] = this.shujuYuan[va]
                }
                this.chearZong.wtzgdw = this.charwtgdwwtzgqk

                this.chearZong.base=this.allBase
                console.log(this.chearZong)
                var choseque = this.choseque //选择部门名称
                console.log(choseque)

                if(choseque == '公司本部' || choseque == '超高压输电公司' ){
                    tijiaoBase(this.chearZong) 
                    . then((res) => {
                        loadingInstance.close();
                        console.log(res)
                        this.baseZhuan(res)//导出模板



                    })
                    .catch((err) => {
                        console.log(err)
                    });

                }else{
                    tijiaoBasedw(this.chearZong) 
                    . then((res) => {
                        loadingInstance.close();
                        console.log(res)
                        this.baseZhuan(res)//导出模板
                    })
                    .catch((err) => {
                        console.log(err)
                    });

                }

                // this.statrEndtime = ''
                // this.choseque = ''
                this.disabled = true;

            },
            //导出模板
            baseZhuan(res){
                const url = window.URL.createObjectURL(new Blob([res.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}));
                const link = document.getElementById('openword');
                link.style.display = 'none';
                link.href = url;
                let fileNameHeader=res.headers['content-disposition'];
                link.download = decodeURIComponent(fileNameHeader.substring(fileNameHeader.indexOf('=')+1));
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                this.timer = setTimeout(()=>{
                    this.$message.success('导出成功');
                }, 1000)
            },
            //问题发现方式情况
            paint1() {
                // 问题发现方式情况
                var Data = [];
                var Data1 = [];
                var Data2 = [];
        
                let arr = this.charwtFxfs.sort(function(a,b){
                    return a.noqid - b.noqid
                })
                var temp = arr.reverse().slice(0,11).reverse()
                temp.forEach((item) => {
                    Data.push(item.wtfxfs)
                    Data1.push(item.sl)
                    Data2.push(item.num)
                })

                let wtfxfsdqk = echarts.init(document.getElementById('wtfxfsdqk'))
                let option ={
                    color: ['#027aff'],
                    title: {
                        left:'center',
                        text: '问题发现方式情况',
                        subtext: '数据来自超高压'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        left:50,
                        data: ['数量','完成率']
                    },
                    grid: {
                        left:'left',
                        right: '20%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: Data,
                        axisLabel: {
                            textStyle: {
                            fontSize : 13      //更改坐标轴文字大小
                            }
                        },
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: Data1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'right', //显示方向
                                        textStyle: { //数值样式
                                            color: '#027aff',
                                            fontSize: 16
                                        }
                                    },
                                    color:'#4ad2ff'
                                }
                            }
                        },
                        {
                            name: '完成率',
                            type: 'bar',
                            data: Data2,
                            itemStyle: {
                              normal: {  
                                    label: {  
                                        show: true,  
                                        position: 'right',  
                                        formatter: '{c}%'  
                                    }  
                                }  
                            }
                        }
                    ]
                } 
            

                wtfxfsdqk.setOption(option)
                let that = this
                setTimeout(function () {
                    that.getBaseImage1(wtfxfsdqk)
                }, 3000)
            },
            //问题单位的分布情况
            paint2() {
                var Data = [];
                var Data1 = [];
                var Data2 = [];
                //  let arr = this.charwtDwdfbqk.sort(function(a,b){
                //      return a.sl - b.sl
                //  })
                this.charwtDwdfbqk.forEach((item) => {
                    Data.push(item.department_name)
                    Data1.push(item.sl)
                    Data2.push(item.num)
                })

                let wtdwdfbqk = echarts.init(document.getElementById('wtdwdfbqk'))
                let option ={
                    color: ['#027aff'],
                    title: {
                        left:'center',
                        text: '问题单位的分布情况',
                        subtext: '数据来自超高压'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        left:50,
                        data: ['数量','完成率']
                    },
                    grid: {
                        top: 80,
                        left:'left',
                        right: '20%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: Data
                    },
                    series: [
                        {

                            name: '数量',
                            type: 'bar',
                            data: Data1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'right', //显示方向
                                        textStyle: { //数值样式
                                            color: '#027aff',
                                            fontSize: 16
                                        }
                                    },
                                    color:'#4ad2ff'
                                }
                            }
                        },
                        {
                            name: '完成率',
                            type: 'bar',
                            data: Data2,
                            itemStyle: {
                              normal: {  
                                    label: {  
                                        show: true,  
                                        position: 'right',  
                                        formatter: '{c}%'  
                                    }  
                                }  
                            }
                        },
                    ]
                } 
            


                wtdwdfbqk.setOption(option)
                let that = this
                setTimeout(function () {
                    that.getBaseImage2(wtdwdfbqk)
                }, 3000)
            },
            //问题专业类别的分布情况
            paint3() {
                var Data = [];
                var Data1 = [];
                var Data2 = [];
                this.charwtwtzylbdfbqk.forEach((item) => {
                    Data.push(item.zylb)
                    Data1.push(item.sl)
                    Data2.push(item.num)
                })

                let wtzylbdfbqk = echarts.init(document.getElementById('wtzylbdfbqk'))
                let option ={
                    color: ['#027aff'],
                    title: {
                        left:'center',
                        text: '问题专业类别的分布情况',
                        subtext: '数据来自超高压'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },                  
                    legend: {
                        left:50,
                        data: ['数量','完成率']
                    },
                    grid: {
                        top: 80,
                        left:'left',
                        right: '20%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: Data
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: Data1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'right', //显示方向
                                        textStyle: { //数值样式
                                            color: '#027aff',
                                            fontSize: 16
                                        }
                                    },
                                    color:'#4ad2ff'
                                }
                            }
                        },
                        {
                            name: '完成率',
                            type: 'bar',
                            data: Data2,
                            itemStyle: {
                              normal: {  
                                    label: {  
                                        show: true,  
                                        position: 'right',  
                                        formatter: '{c}%'  
                                    }  
                                }  
                            }
                        },
                    ]
                } 
            

                wtzylbdfbqk.setOption(option)
                let that = this
                setTimeout(function () {
                    that.getBaseImage3(wtzylbdfbqk)
                }, 3000)
            },
            //问题业务事项的分布情况
            paint4() {
                var Data = [];
                var Data1 = [];
                var Data2 = [];
                console.log(this.charwtwtywsxdfbqk)
                this.charwtwtywsxdfbqk.reverse().slice(0,10).reverse().forEach((item) => {
                    Data.push(item.ywsx)
                    Data1.push(item.sl)
                    Data2.push(item.num)
                })

                let wtywsxdfbqk = echarts.init(document.getElementById('wtywsxdfbqk'))
                let option ={
                    color: ['#027aff'],
                    title: {
                        left:'center',
                        text: '问题业务事项的分布情况',
                        subtext: '数据来自超高压'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },                  
                    legend: {
                        left:50,
                        data: ['数量','完成率']
                    },
                    grid: {
                        top: 80,
                        left:'left',
                        right: '20%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: Data
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: Data1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'right', //显示方向
                                        textStyle: { //数值样式
                                            color: '#027aff',
                                            fontSize: 16
                                        }
                                    },
                                    color:'#4ad2ff'
                                }
                            }
                        },
                        {
                            name: '完成率',
                            type: 'bar',
                            data: Data2,
                            itemStyle: {
                              normal: {  
                                    label: {  
                                        show: true,  
                                        position: 'right',  
                                        formatter: '{c}%'  
                                    }  
                                }  
                            }
                        },
                    ]
                } 
            

                wtywsxdfbqk.setOption(option)
                let that = this
                setTimeout(function () {
                    that.getBaseImage4(wtywsxdfbqk)
                }, 3000)
            },
            //问题所属层面的分布情况
            paint5() {
                var Data = [];
                var Data1 = [];
                var Data2 = [];
                this.charwtwtsscmdfbqk.forEach((item) => {
                    Data.push(item.sscm)
                    Data1.push(item.sl)
                    Data2.push(item.num)
                })

                let wtsscmdfbqk = echarts.init(document.getElementById('wtsscmdfbqk'))
                let option ={
                    color: ['#027aff'],
                    title: {
                        left:'center',
                        text: '问题所属层面的分布情况',
                        subtext: '数据来自超高压'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },                  
                    legend: {
                        left:50,
                        data: ['数量','完成率']
                    },
                    grid: {
                        top: 80,
                        left:'left',
                        right: '20%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: Data
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: Data1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'right', //显示方向
                                        textStyle: { //数值样式
                                            color: '#027aff',
                                            fontSize: 16
                                        }
                                    },
                                    color:'#4ad2ff'
                                }
                            }
                        },
                        {
                            name: '完成率',
                            type: 'bar',
                            data: Data2,
                            itemStyle: {
                              normal: {  
                                    label: {  
                                        show: true,  
                                        position: 'right',  
                                        formatter: '{c}%'  
                                    }  
                                }  
                            }
                        },
                    ]
                } 
            

                wtsscmdfbqk.setOption(option)
                let that = this
                setTimeout(function () {
                    that.getBaseImage4(wtsscmdfbqk)
                }, 3000)
            },
            //问题管理环节的分布情况
            paint6() {
                var Data = [];
                var Data1 = [];
                var Data2 = [];
                this.charwtwtglhjdfbqk.forEach((item) => {
                    Data.push(item.glhj)
                    Data1.push(item.sl)
                    Data2.push(item.num)
                })

                let wtglhjdfbqk = echarts.init(document.getElementById('wtglhjdfbqk'))
                let option ={
                    color: ['#027aff'],
                    title: {
                        left:'center',
                        text: '问题管理环节的分布情况',
                        subtext: '数据来自超高压'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },                  
                    legend: {
                        left:50,
                        data: ['数量','完成率']
                    },
                    grid: {
                        top: 80,
                        left:'left',
                        right: '20%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: Data
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: Data1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'right', //显示方向
                                        textStyle: { //数值样式
                                            color: '#027aff',
                                            fontSize: 16
                                        }
                                    },
                                    color:'#4ad2ff'
                                }
                            }
                        },
                        {
                            name: '完成率',
                            type: 'bar',
                            data: Data2,
                            itemStyle: {
                              normal: {  
                                    label: {  
                                        show: true,  
                                        position: 'right',  
                                        formatter: '{c}%'  
                                    }  
                                }  
                            }
                        },
                    ]
                } 
            

                wtglhjdfbqk.setOption(option)
                let that = this
                setTimeout(function () {
                    that.getBaseImage6(wtglhjdfbqk)
                }, 3000)
            },
            //问题类别的分布情况
            paint7() {
                var Data = [];
                var Data1 = [];
                var Data2 = [];
                this.charwtwtlbdfbqk.forEach((item) => {
                    Data.push(item.lb)
                    Data1.push(item.sl)
                    Data2.push(item.num)
                })

                let wtlbdfbqk = echarts.init(document.getElementById('wtlbdfbqk'))
                let option ={
                    color: ['#027aff'],
                    title: {
                        left:'center',
                        text: '问题类别的分布情况',
                        subtext: '数据来自超高压'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },                  
                    legend: {
                        left:50,
                        data: ['数量','完成率']
                    },
                    grid: {
                        top: 80,
                        left:'left',
                        right: '20%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: Data
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: Data1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'right', //显示方向
                                        textStyle: { //数值样式
                                            color: '#027aff',
                                            fontSize: 16
                                        }
                                    },
                                    color:'#4ad2ff'
                                }
                            }
                        },
                        {
                            name: '完成率',
                            type: 'bar',
                            data: Data2,
                            itemStyle: {
                              normal: {  
                                    label: {  
                                        show: true,  
                                        position: 'right',  
                                        formatter: '{c}%'  
                                    }  
                                }  
                            }
                        },
                    ]
                } 
            

                wtlbdfbqk.setOption(option)
                let that = this
                setTimeout(function () {
                    that.getBaseImage7(wtlbdfbqk)
                }, 3000)
            },
            //问题对应体系单元的分布情况
            paint8() {
                var Data = [];
                var Data1 = [];
                var Data2 = [];
                this.charwtwtdytxdydfbqk.forEach((item) => {
                    Data.push(item.dytxdy)
                    Data1.push(item.sl)
                    Data2.push(item.num)
                })

                let wtdytxdydfbqk = echarts.init(document.getElementById('wtdytxdydfbqk'))
                let option ={
                    color: ['#027aff'],
                    title: {
                        left:'center',
                        text: '问题对应体系单元的分布情况',
                        subtext: '数据来自超高压'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },                  
                    legend: {
                        left:50,
                        data: ['数量','完成率']
                    },
                    grid: {
                        top: 80,
                        left:'left',
                        right: '20%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: Data
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: Data1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'right', //显示方向
                                        textStyle: { //数值样式
                                            color: '#027aff',
                                            fontSize: 16
                                        }
                                    },
                                    color:'#4ad2ff'
                                }
                            }
                        },
                        {
                            name: '完成率',
                            type: 'bar',
                            data: Data2,
                            itemStyle: {
                              normal: {  
                                    label: {  
                                        show: true,  
                                        position: 'right',  
                                        formatter: '{c}%'  
                                    }  
                                }  
                            }
                        },
                    ]
                } 
            

                wtdytxdydfbqk.setOption(option)
                let that = this
                setTimeout(function () {
                    that.getBaseImage8(wtdytxdydfbqk)
                }, 3000)
            },
            //问题对应体系要素的分布情况
            paint9() {
                var Data = [];
                var Data1 = [];
                var Data2 = [];
                var temp = this.charwtwtdytxysdfbqk.reverse().slice(0,11).reverse()
                temp.forEach((item) => {
                    Data.push(item.dytxys)
                    Data1.push(item.sl)
                    Data2.push(item.num)
                })
                let wtdytxysdfbqk = echarts.init(document.getElementById('wtdytxysdfbqk'))
                let option ={
                    color: ['#027aff'],
                    title: {
                        left:'center',
                        text: '问题对应体系要素的分布情况',
                        subtext: '数据来自超高压'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },                  
                    legend: {
                        left:50,
                        data: ['数量','完成率']
                    },
                    grid: {
                        top: 80,
                        left:'left',
                        right: '20%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: Data
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: Data1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'right', //显示方向
                                        textStyle: { //数值样式
                                            color: '#027aff',
                                            fontSize: 16
                                        }
                                    },
                                    color:'#4ad2ff'
                                }
                            }
                        },
                        {
                            name: '完成率',
                            type: 'bar',
                            data: Data2,
                            itemStyle: {
                              normal: {  
                                    label: {  
                                        show: true,  
                                        position: 'right',  
                                        formatter: '{c}%'  
                                    }  
                                }  
                            }
                        },
                    ]
                } 
            

                wtdytxysdfbqk.setOption(option)
                let that = this
                setTimeout(function () {
                    that.getBaseImage9(wtdytxysdfbqk)
                }, 3000)
            },
            //问题严重程度的分布情况
            paint10() {
                var Data = [];
                var Data1 = [];
                var Data2 = [];
                this.charwtwtyzcddfbqk.forEach((item) => {
                    Data.push(item.wtyzcd)
                    Data1.push(item.sl)
                    Data2.push(item.num)
                })

                let wtyzcddfbqk = echarts.init(document.getElementById('wtyzcddfbqk'))
                let option ={
                    color: ['#027aff'],
                    title: {
                        left:'center',
                        text: '问题严重程度的分布情况',
                        subtext: '数据来自超高压'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },                  
                    legend: {
                        left:50,
                        data: ['数量','完成率']
                    },
                    grid: {
                        top: 80,
                        left:'left',
                        right: '20%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: Data
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: Data1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'right', //显示方向
                                        textStyle: { //数值样式
                                            color: '#027aff',
                                            fontSize: 16
                                        }
                                    },
                                    color:'#4ad2ff'
                                }
                            }
                        },
                        {
                            name: '完成率',
                            type: 'bar',
                            data: Data2,
                            itemStyle: {
                              normal: {  
                                    label: {  
                                        show: true,  
                                        position: 'right',  
                                        formatter: '{c}%'  
                                    }  
                                }  
                            }
                        },
                    ]
                } 
            

                wtyzcddfbqk.setOption(option)
                let that = this
                setTimeout(function () {
                    that.getBaseImage10(wtyzcddfbqk)
                }, 3000)
            },
            //公司三老问题的分布情况
            paint11() {
                var Data = [];
                var Data1 = [];
                this.charwtgsslwtdfbqk.forEach((item) => {
                    Data.push(item.name)
                    Data1.push(item.sl)
                })

                let gsslwtdfbqk = echarts.init(document.getElementById('gsslwtdfbqk'))
                let option ={
                    color: ['#027aff'],
                    title: {
                        left:'center',
                        text: '公司三老问题的分布情况',
                        subtext: '数据来自超高压'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },                  
                    legend: {
                        left:50,
                        data: ['数量','完成率']
                    },
                    grid: {
                        top: 80,
                        left:'left',
                        right: '20%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: Data
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: Data1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'right', //显示方向
                                        textStyle: { //数值样式
                                            color: '#027aff',
                                            fontSize: 16
                                        }
                                    },
                                    color:'#4ad2ff'
                                }
                            }
                        },
                    ]
                } 
            

                gsslwtdfbqk.setOption(option)
                let that = this
                setTimeout(function () {
                    that.getBaseImage11(gsslwtdfbqk)
                }, 3000)
            },
            //各单位三老问题的分布情况
            paint12() {
                var Data = [];
                var Data1 = [];
                let arr = this.charwtdwslwtdfbqk.sort(function(a,b){
                    return a.sl - b.sl 
                })
                arr.forEach((item) => {
                    Data.push(item.department_name)
                    Data1.push(item.sl)
                })

                let dwslwtdfbqk = echarts.init(document.getElementById('dwslwtdfbqk'))
                let option ={
                    color: ['#027aff'],
                    title: {
                        left:'center',
                        text: '各单位三老问题的分布情况',
                        subtext: '数据来自超高压'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },                  
                    legend: {
                        left:50,
                        data: ['数量','完成率']
                    },
                    grid: {
                        top: 80,
                        left:'left',
                        right: '20%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: Data
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: Data1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'right', //显示方向
                                        textStyle: { //数值样式
                                            color: '#027aff',
                                            fontSize: 16
                                        }
                                    },
                                    color:'#4ad2ff'
                                }
                            }
                        },
                    ]
                } 
            

                dwslwtdfbqk.setOption(option)
                let that = this
                setTimeout(function () {
                    that.getBaseImage12(dwslwtdfbqk)
                }, 3000)
            },
            //公司问题主动暴露的分布情况
            paint13() {
                var Data = [];
                var Data1 = [];
                this.charwtgswtzdbldfbqk.forEach((item) => {
                    Data.push(item.name)
                    Data1.push(item.sl)
                })

                let gswtzdbldfbqk = echarts.init(document.getElementById('gswtzdbldfbqk'))
                let option ={
                    color: ['#027aff'],
                    title: {
                        left:'center',
                        text: '公司问题主动暴露的分布情况',
                        subtext: '数据来自超高压'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },                  
                    legend: {
                        left:50,
                        data: ['数量','完成率']
                    },
                    grid: {
                        top: 80,
                        left:'left',
                        right: '20%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: Data
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: Data1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'right', //显示方向
                                        textStyle: { //数值样式
                                            color: '#027aff',
                                            fontSize: 16
                                        }
                                    },
                                    color:'#4ad2ff'
                                }
                            }
                        },
                    ]
                } 
            

                gswtzdbldfbqk.setOption(option)
                let that = this
                setTimeout(function () {
                    that.getBaseImage13(gswtzdbldfbqk)
                }, 3000)
            },
            //各单位问题主动暴露的分布情况
            paint14() {
                var Data = [];
                var Data1 = [];
                this.charwtdwwtzdbldfbqk.sort(function(a,b){
                    return b.sl-a.sl
                })
                this.charwtdwwtzdbldfbqk.reverse().forEach((item) => {
                    Data.push(item.department_name)
                    Data1.push(item.sl)
                })

                let dwwtzdbldfbqk = echarts.init(document.getElementById('dwwtzdbldfbqk'))
                let option ={
                    color: ['#027aff'],
                    title: {
                        left:'center',
                        text: '各单位问题主动暴露的分布情况',
                        subtext: '数据来自超高压'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },                  
                    legend: {
                        left:50,
                        data: ['数量','完成率']
                    },
                    grid: {
                        top: 80,
                        left:'left',
                        right: '20%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: Data
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: Data1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'right', //显示方向
                                        textStyle: { //数值样式
                                            color: '#027aff',
                                            fontSize: 16
                                        }
                                    },
                                    color:'#4ad2ff'
                                }
                            }
                        },
                    ]
                } 
            

                dwwtzdbldfbqk.setOption(option)
                let that = this
                setTimeout(function () {
                    that.getBaseImage14(dwwtzdbldfbqk)
                }, 3000)
            },
            //公司问题整改情况
            paint15() {
                var Data = [];
                var Data1 = [];
                var Data2 = [];
                this.charwtgswtzgqk.reverse().forEach((item) => {
                    Data.push(item.lb)
                    Data1.push(item.sl)
                    Data2.push(item.num)
                })

                let gswtzgqk = echarts.init(document.getElementById('gswtzgqk'))
                let option ={
                    color: ['#027aff'],
                    title: {
                        left:'center',
                        text: '公司问题整改情况',
                        subtext: '数据来自超高压'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        left:50,
                        data: ['数量','完成率']
                    },
                    grid: {
                        top: 80,
                        left:'left',
                        right: '20%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: Data
                    },
                    series: [
                        {
                            name: '数量',
                            type: 'bar',
                            data: Data1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'right', //显示方向
                                        textStyle: { //数值样式
                                            color: '#027aff',
                                            fontSize: 16
                                        }
                                    },
                                    color:'#4ad2ff'
                                }
                            }
                        },
                        {
                            name: '完成率',
                            type: 'bar',
                            data: Data2,
                            itemStyle: {
                              normal: {  
                                    label: {  
                                        show: true,  
                                        position: 'right',  
                                        formatter: '{c}%'  
                                    }  
                                }  
                            }
                        }
                    ]
                } 
            

                gswtzgqk.setOption(option)
                let that = this
                setTimeout(function () {
                    that.getBaseImage15(gswtzgqk)
                }, 3000)
            },
            //各单位问题整改情况
            paint16() {
                var Data = [];
                var Data1 = [];
                var Data2 = [];
                var Data3 = [];
                var Data4 = [];
                var Data5 = [];
                var Data6 = [];
                var Data7 = [];
                var temp = [];
                var find = false;
                console.log(this.charwtgdwwtzgqk)
                var dwwcl = this.shujuYuan.wtdwwcl
                this.charwtgdwwtzgqk.forEach((item,i) => {
                    for(let k in item){
                        var obj = {}
                        item[k].forEach((v) => {
                            switch(v.lb){
                                // case '没有启动':
                                // obj.noqid = v.sl
                                // break;
                                // case '流程中':
                                // obj.liucz = v.sl
                                // break;
                                // case '按期整改未验收':
                                // obj.anqiwei = v.sl
                                // break;
                                // case '超期未整改':
                                // obj.chaoqiwei = v.sl
                                // break;
                                // case '已验收':
                                // obj.yiyans = v.sl
                                // break;
                                case '未启动':
                                obj.noqid = v.sl
                                break;
                                case '待整改':
                                obj.daizhenggai = v.sl
                                break;
                                case '待审核':
                                obj.daishenhe = v.sl
                                break;
                                case '待落实':
                                obj.dailuoshi = v.sl
                                break;
                                case '待验收':
                                obj.daiyanshou = v.sl
                                break;
                                case '已验收':
                                obj.yiyans = v.sl
                                break;
                            }
                                obj.mc = v.department_name                               
                        })
                        // console.log(k)
                        // console.log(dwwcl[i].department_name)
                        //     if(k == dwwcl[i].department_name){
                        //         obj.wcl = dwwcl[i].wcl
                        //     }
   

                    }
                    temp.push(obj)
                })


                this.charwtgdwwtzgqk = temp
                let arr = temp.sort(function(a,b){
                    return b.noqid-a.noqid
                })
                

                arr.forEach((item,i) => {
                    dwwcl.forEach((items) => {
                        if(item.mc == items.department_name){
                            this.charwtgdwwtzgqk[i].wcl = items.wcl
                        }
                    })
                    Data.push(item.mc)//公司
                    Data1.push(item.noqid)//没有启动
                    Data2.push(item.daizhenggai)//待整改
                    Data3.push(item.daishenhe)//待审核
                    Data4.push(item.dailuoshi)//待落实
                    Data5.push(item.daiyanshou)//待验收
                    Data6.push(item.yiyans)//已验收
                    Data7.push(item.wcl)//整改率
                })

                let gdwwtzgqk = echarts.init(document.getElementById('gdwwtzgqk'))
                let option ={
                    color: ['#027aff'],
                    title: {
                        left:'center',
                        text: '各单位问题整改情况',
                        subtext: '数据来自超高压'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        left:50,
                        data: ['未启动','待整改','待审核','待落实','待验收','已验收','整改率']
                    },
                    grid: {
                        top: 80,
                        left:'left',
                        right: '20%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: Data
                    },
                    series: [
                        {
                            name: '未启动',
                            type: 'bar',
                            data: Data1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'right', //显示方向
                                        textStyle: { //数值样式
                                            color: '#032e5d',
                                            fontSize: 16
                                        }
                                    },
                                    color:'#032e5d'
                                }
                            }
                        },
                        {
                            name: '待整改',
                            type: 'bar',
                            data: Data2,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'right', //显示方向
                                        textStyle: { //数值样式
                                            color: '#3c03c7',
                                            fontSize: 16
                                        }
                                    },
                                    color:'#3c03c7'
                                }
                            }
                        },
                        {
                            name: '待审核',
                            type: 'bar',
                            data: Data3,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'right', //显示方向
                                        textStyle: { //数值样式
                                            color: '#bb03c7',
                                            fontSize: 16
                                        }
                                    },
                                    color:'#bb03c7'
                                }
                            }
                        },
                         {
                            name: '待落实',
                            type: 'bar',
                            data: Data4,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'right', //显示方向
                                        textStyle: { //数值样式
                                            color: '#bb03c7',
                                            fontSize: 16
                                        }
                                    },
                                    color:'#bb03c7'
                                }
                            }
                        },
                        {
                            name: '待验收',
                            type: 'bar',
                            data: Data5,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'right', //显示方向
                                        textStyle: { //数值样式
                                            color: '#027aff',
                                            fontSize: 16
                                        }
                                    },
                                    color:'#4ad2ff'
                                }
                            }
                        },
                        {
                            name: '已验收',
                            type: 'bar',
                            data: Data6,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'right', //显示方向
                                        textStyle: { //数值样式
                                            color: '#c70303',
                                            fontSize: 16
                                        }
                                    },
                                    color:'#c70303'
                                }
                            }
                        },
                        {
                            name: '整改率',
                            type: 'bar',
                            data: Data7,
                            itemStyle: {
                              normal: {  
                                    label: {  
                                        show: true,  
                                        position: 'right',  
                                        formatter: '{c}%',
                                         textStyle: { //数值样式
                                            color: '#eccf3d',
                                            fontSize: 16
                                        }  
                                    },
                                    color:'#eccf3d'  
                                }  
                            }
                        }
                    ]
                } 
            

                gdwwtzgqk.setOption(option)
                let that = this
                setTimeout(function () {
                    that.getBaseImage16(gdwwtzgqk)
                }, 3000)
            },
        ////////////////////////////
            //问题发现方式情况
            getBaseImage1(chart) {
                let url = chart.getDataURL({
                    pixelRatio: 2,
                    backgroundColor: '#fff'
                })
                this.maChart1 = url
                this.allBase.push(this.maChart1) 
            },
            //问题单位的分布情况
            getBaseImage2(chart) {
                let url = chart.getDataURL({
                    pixelRatio: 2,
                    backgroundColor: '#fff'
                })
                this.maChart2 = url
                this.allBase.push(this.maChart2) 
            },
            //问题专业类别的分布情况
            getBaseImage3(chart) {
                let url = chart.getDataURL({
                    pixelRatio: 2,
                    backgroundColor: '#fff'
                })
                this.maChart3 = url
                this.allBase.push(this.maChart3) 
                
            },
            //问题业务事项的分布情况
            getBaseImage4(chart) {
                let url = chart.getDataURL({
                    pixelRatio: 2,
                    backgroundColor: '#fff'
                })
                this.maChart4 = url
                this.allBase.push(this.maChart4) 
                
            },
            //问题所属层面的分布情况
            getBaseImage5(chart) {
                let url = chart.getDataURL({
                    pixelRatio: 2,
                    backgroundColor: '#fff'
                })
                this.maChart5 = url
                this.allBase.push(this.maChart5) 
                
            },
            //问题管理环节的分布情况
            getBaseImage6(chart) {
                let url = chart.getDataURL({
                    pixelRatio: 2,
                    backgroundColor: '#fff'
                })
                this.maChart6 = url
                this.allBase.push(this.maChart6) 
                
            },
            //问题类别的分布情况
            getBaseImage7(chart) {
                let url = chart.getDataURL({
                    pixelRatio: 2,
                    backgroundColor: '#fff'
                })
                this.maChart7 = url
                this.allBase.push(this.maChart7) 
                
            },
            //问题对应体系单元的分布情况
            getBaseImage8(chart) {
                let url = chart.getDataURL({
                    pixelRatio: 2,
                    backgroundColor: '#fff'
                })
                this.maChart8 = url
                this.allBase.push(this.maChart8) 
                
            },
            //问题对应体系要素的分布情况
            getBaseImage9(chart) {
                let url = chart.getDataURL({
                    pixelRatio: 2,
                    backgroundColor: '#fff'
                })
                this.maChart9 = url
                this.allBase.push(this.maChart9) 
                
            },
            //问题严重程度的分布情况
            getBaseImage10(chart) {
                let url = chart.getDataURL({
                    pixelRatio: 2,
                    backgroundColor: '#fff'
                })
                this.maChart10 = url
                this.allBase.push(this.maChart10) 
                
            },
            //公司三老问题的分布情况
            getBaseImage11(chart) {
                let url = chart.getDataURL({
                    pixelRatio: 2,
                    backgroundColor: '#fff'
                })
                this.maChart11 = url
                this.allBase.push(this.maChart11) 
                
            },
            //各公司三老问题的分布情况
            getBaseImage12(chart) {
                let url = chart.getDataURL({
                    pixelRatio: 2,
                    backgroundColor: '#fff'
                })
                this.maChart12 = url
                this.allBase.push(this.maChart12) 
                
            },
            //公司问题主动暴露的分布情况
            getBaseImage13(chart) {
                let url = chart.getDataURL({
                    pixelRatio: 2,
                    backgroundColor: '#fff'
                })
                this.maChart13 = url
                this.allBase.push(this.maChart13) 
                
            },
            //各单位问题主动暴露的分布情况
            getBaseImage14(chart) {
                let url = chart.getDataURL({
                    pixelRatio: 2,
                    backgroundColor: '#fff'
                })
                this.maChart14 = url
                this.allBase.push(this.maChart14) 
                
            },
            //公司问题整改情况
            getBaseImage15(chart) {
                let url = chart.getDataURL({
                    pixelRatio: 2,
                    backgroundColor: '#fff'
                })
                this.maChart15 = url
                this.allBase.push(this.maChart15) 
                
            },
            //各单位问题整改情况
            getBaseImage16(chart) {
                let url = chart.getDataURL({
                    pixelRatio: 2,
                    backgroundColor: '#fff'
                })
                this.maChart16 = url
                this.allBase.push(this.maChart16) 
                
            },
            changeChart(type, id, name) {
                this.chartData[id].component = type
                this.chartData[id].componentName = name
            },
            setImageBase(index, url) {
                this.imageListBase[index].url = url
                console.log(this.imageListBase)
            },
            // 点击导出成word文档
            base64DataURLToArrayBuffer(dataURL) {
                const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
                if (!base64Regex.test(dataURL)) {
                    return false;
                }
                const stringBase64 = dataURL.replace(base64Regex, "");
                let binaryString;
                if (typeof window !== "undefined") {
                    binaryString = window.atob(stringBase64);
                } else {
                    binaryString = new Buffer(stringBase64, "base64").toString("binary");
                }
                const len = binaryString.length;
                const bytes = new Uint8Array(len);
                for (let i = 0; i < len; i++) {
                    const ascii = binaryString.charCodeAt(i);
                    bytes[i] = ascii;
                }
                return bytes.buffer;
            },
            exportWord() {
                let ImageModule = require('docxtemplater-image-module-free');

                // 点击导出word
                let _this = this;
                // 读取并获得模板文件的二进制内容
                JSZipUtils.getBinaryContent("input.docx", function (error, content) {
                    if (error) {
                        throw error;
                    }
                    let opts = {}
                    opts.centered = true;  
                    opts.fileType = "docx";
                    opts.getImage = function (chartId) {
                        return _this.base64DataURLToArrayBuffer(chartId);
                    }
                    opts.getSize = function () {
                        return [734, 250]
                    }
                    let imageModule = new ImageModule(opts);
                    let zip = new PizZip(content);
                    let doc = new docxtemplater();
                    doc.attachModule(imageModule);
                    doc.loadZip(zip);
                    doc.setData({
                        imagelist: _this.imageListBase,
                        imagelist2: _this.imageListBase2,
                        imagelist3: _this.maChart2,
                    });

                    try {
                        doc.render();
                    } catch (error) {
                        let e = {
                            message: error.message,
                            name: error.name,
                            stack: error.stack,
                            properties: error.properties
                        };
                        throw error;
                    }
                    let out = doc.getZip().generate({
                        type: "blob",
                        mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                    });
                    saveAs(out, "echartsWord.docx");
                });
            },
            doBack() {
                this.$router.back();
            },
        },
     
        components: {
            redar,
            rectangle,
            linex,
            pie,
            tablex
        }
    }
</script>

<style lang='less' scoped>
body {
  background: #ccc;
}

    .tishichi{
    -webkit-appearance: none;
        background-color: #FFF;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #606266;
        /* display: inline-block; */
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        width: 400px;
        margin-top: 10px;
    }
   
    div {
        width: 100%;
        height: 100%;
        display: block;
    }

    .main {
        width: 100%;
        display: block;
        float: left;
        box-sizing: border-box;

        /* 数据概述 */
        .data-summary {
            width: 100%;
            display: block;
            box-sizing: border-box;
            margin-top: 30px;
            border-radius: 10px;

            .ds-title {
                display: block;
                margin-left: 40px;
                font-size: 24px;
            }

            /* 数据名 */
            .data-specific {
                width: 100%;
                display: flex;
                height: 40px;

                span {
                    flex: 1;
                    text-align: center;
                    font-size: 16px;
                }
            }

            /* 数据 */
            .num-specific {
                width: 100%;
                display: flex;

                span {
                    flex: 1;
                    text-align: center;
                    font-size: 30px;
                }
            }
        }

        /* 统计图表 */
        .statistical-chart {
            width: 100%;
            display: block;
            margin-top: 30px;

            /* 标题 */
            .sc-title {
                width: 100%;
                display: block;
                padding-bottom: 10px;

                .title {
                    font-size: 24px;
                    margin-left: 40px;
                    display: block;
                    float: left;
                }

                /* 按钮 */
                .el-button {
                    font-size: 16px;
                    display: block;
                    float: right;
                    position: relative;
                    bottom: 10px;
                    padding-left: 58px;
                    padding-right: 38px;
                    background-color: #fff;
                    border: 1px solid #999999;
                    color: #666666;
                    margin: 0;
                    margin-right: 20px;

                    .icon-export {
                        width: 18px;
                        height: 18px;
                        display: block;
                        position: absolute;
                        left: 38px;
                        top: 10px;
                        background: url(
                            ../../assets/img/icon/export.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }
            }
        }

        /* 图表容器 */
        .chart-subject {
            box-sizing: border-box;

            .el-scrollbar {

                /* 图表盒子 */
                .chart-container {
                    box-sizing: border-box;
                    display: block;
                    text-align: center;

                    .container {
                        width: 1200px;
                        margin: 0 auto;
                        display: block;
                        border: 1px solid #e6e6e6;
                        box-sizing: border-box;
                        margin-top: 50px;

                        &:first-child {
                            margin-top: 0;
                        }

                        .header {
                            height: 40px;
                            width: 100%;
                            display: block;
                            background-color: #e6e6e6;

                            .title {
                                height: 40px;
                                display: block;
                                line-height: 40px;
                                width: 80px;
                                text-align: left;
                                margin-left: 20px;
                                float: left;
                            }

                            .select {
                                width: 120px;
                                margin-top: 6px;
                                margin-right: 20px;
                                display: block;
                                float: right;
                            }
                        }

                        .content {
                            height: 408px;
                            margin: 0;
                        }
                    }
                }
            }
        }
    }



    /* 侧边卡片 */
    .el-aside {
        overflow: hidden !important;
        width: 90px !important;
        display: block;
        float: left;

        .aside-card {
            height: 800px;
            overflow: none;
            box-sizing: border-box;
        }

    }

    /* 主体内容区域 */
    .el-main /deep/ {
        margin-left: 0px;
        overflow-y: hidden !important;
        box-sizing: border-box;
        padding: 0;
    }

    .el-main::-webkit-scrollbar {
        display: none;
    }

    /* 侧边栏题型按钮 */
    .asideDiv {
        height: 50px;
        width: 50px;
        display: flex;
        align-items: center;
        font-size: 32px;
        border-radius: 5px;
        overflow: hidden;
        transition: all .2s;
        cursor: pointer;
        margin-top: 10px;

        i {
            width: 32px;
            height: 32px;
            display: block;
            margin-left: 9px;
        }
    }

    /* 鼠标点击按钮 */
    .isActive {
        background-color: #027aff;
        transition: all .2s;

        .icon-data {
            background-image: url('../../assets/img/icon/data.png') !important;
            background-size: 100% 100%;
        }
    }



    /* 按钮标题 */
    .qestype-title {
        font-size: 12px;
        text-align: center;
        display: block;
        margin-top: 10px;
    }
    /deep/.el-pagination {
        white-space: normal;
    }
</style>